﻿<!DOCTYPE html>
<html>

<head>
    <title>Blazor WebAssembly + HTML Canvas</title>
</head>

<body style="margin: 0px; background-color: #003366; color: white; font-family: sans-serif;">
    <app>
        <div style="margin: 1em; font-size: 2em;">Loading Blazor HTML canvas demo...</div>
    </app>

    <div id="blazor-error-ui" style="visibility: hidden">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>

    <script>

        function renderJS(timeStamp) {
            theInstance.invokeMethodAsync('RenderInBlazor', timeStamp);
            window.requestAnimationFrame(renderJS);
        }

        function resizeCanvasToFitWindow() {
            var holder = document.getElementById('canvasHolder');
            var canvas = holder.querySelector('canvas');
            if (canvas) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                theInstance.invokeMethodAsync('ResizeInBlazor', canvas.width, canvas.height);
            }
        }

        window.initRenderJS = (instance) => {
            window.theInstance = instance;
            window.addEventListener("resize", resizeCanvasToFitWindow);
            resizeCanvasToFitWindow();
            window.requestAnimationFrame(renderJS);
        };

    </script>

</body>

</html>
